<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="85px"
    >
      <el-form-item label="园所性质" prop="type">
        <el-select
          v-model="queryParams.type"
          placeholder="请选择园所性质"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in schoolTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="地区类型" prop="nature">
        <el-select
          v-model="queryParams.nature"
          placeholder="请选择地区类型"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in schoolNatureOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div class="charts">
      <div ref="materialsChart" class="materialsChart"></div>
      <div ref="anglechart" class="anglechart"></div>
      <div ref="typeChart" class="typeChart"></div>
      <div ref="natureChart" class="natureChart"></div>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import { selectSemster } from "@/api/base/semster";
import {
  getmaterial,
  getmaterialCorner,
  getschoolMaterial,
  getTypeMaterial,
} from "@/api/qu/qycktf";
export default {
  name: "cltftj",
  data() {
    return {
      queryParams: {
        type: "1",
        nature: "",
      },
      materialsChart: null,
      materialsList: [
        { name: "大型器械", value: 200 },
        { name: "中小型器械", value: 200 },
        { name: "手持器械", value: 200 },
      ],
      anglechart: null,
      angleList: [],
      typeChart: null,
      typeList: [
        { name: "民办园", value: 20 },
        { name: "公办园", value: 20 },
      ],
      natureChart: null,
      natureList: [
        { name: "城区园", value: 20 },
        { name: "乡镇园", value: 20 },
        { name: "农村园", value: 20 },
      ],
      schoolTypeOptions: [],
      schoolNatureOptions: [],
      materialTypeOptions: [],
      cornerTypeOptions: [],
    };
  },
  created() {
    this.getDicts("park_type").then((response) => {
      this.schoolTypeOptions = response.data;
    });
    this.getDicts("school_nature").then((response) => {
      this.schoolNatureOptions = response.data;
    });
    this.getDicts("material_type").then((response) => {
      this.materialTypeOptions = response.data;
    });
    this.getDicts("corner_type").then((response) => {
      this.cornerTypeOptions = response.data;
    });
  },
  mounted() {
    // this.getList()
    this.materialsChart = this.$echarts.init(this.$refs.materialsChart);
    this.anglechart = this.$echarts.init(this.$refs.anglechart);
    this.natureChart = this.$echarts.init(this.$refs.natureChart);
    this.typeChart = this.$echarts.init(this.$refs.typeChart);
    this.getmaterial();
    this.getmaterialCorner();
    this.getschoolMaterial();
    this.getTypeMaterial();
  },
  methods: {
    // 全区材料统计
    async getmaterial() {
      try {
        const obj = {
          type: this.queryParams.type,
          nature: this.queryParams.nature,
        };
        const data = await getmaterial(obj);
        console.log(data);
        // this.materialsList = data.rows.map((item) => {
        //   if(item == null) {
        //     return
        //   }
        //   return {
        //     name: this.materialTypeFormat(item),
        //     value: item.materialCount,
        //   };
        // });
        this.materialsChartFn();
      } catch (error) {
        console.log(error);
      }
    },

    //各区角材料投放
    async getmaterialCorner() {
      try {
        const obj = {
          type: this.queryParams.type,
          nature: this.queryParams.nature,
        };
        const data = await getmaterialCorner(obj);
        this.angleList = data.rows.map((item) => {
          return {
            name: this.cornerTypeFormat(item),
            value: item.materialCount,
          };
        });
        this.anglechartFn();
      } catch (error) {
        console.log(error);
      }
    },

    //地区类型查询材料
    async getschoolMaterial() {
      try {
        const data = await getschoolMaterial({});
        this.natureList = data.rows.map((item) => {
          return {
            name: this.schoolNatureFormat(item),
            value: item.materialCount,
          };
        });
        this.natureChartFn();
      } catch (error) {
        console.log(error);
      }
    },
    //园所性质查询材料
    async getTypeMaterial() {
      try {
        const data = await getTypeMaterial({});
        this.typeList = data.rows.map((item) => {
          return {
            name: this.schoolTypeFormat(item),
            value: item.materialCount,
          };
        });
        this.typeChartFn();
      } catch (error) {
        console.log(error);
      }
    },
    // 园所性质字典翻译
    schoolTypeFormat(row, column) {
      return this.selectDictLabel(this.schoolTypeOptions, row.schoolType);
    },
    //地区类型字典翻译
    schoolNatureFormat(row, column) {
      return this.selectDictLabel(this.schoolNatureOptions, row.nature);
    },
    // 材料类型字典翻译
    materialTypeFormat(row, column) {
      return this.selectDictLabel(this.materialTypeOptions, row.materialType);
    },
    // 区角类型字典翻译
    cornerTypeFormat(row) {
      return this.selectDictLabel(this.cornerTypeOptions, row.cornerType);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getmaterial();
      this.getmaterialCorner();
    },
    /** 重置按钮操作 */
    resetQuery() {
      (this.queryParams = {
        type: "1",
        nature: "",
      }),
        this.resetForm("queryForm");
      this.handleQuery();
    },
    materialsChartFn() {
      console.log(this.materialsList)
      // const option = {
      //   // backgroud:'#333',
      //   title: {
      //     text: "材料投放情况",
      //     //  subtext: '纯属虚构',
      //     left: "left",
      //   },
      //   tooltip: {
      //     trigger: "axis",
      //     axisPointer: {
      //       type: "shadow",
      //     },
      //   },
      //   legend: {
      //     selectedMode: "single",
      //     top: 0,
      //     left: "right",
      //   },
      //   grid: {
      //     left: "3%",
      //     right: "4%",
      //     bottom: "3%",
      //     containLabel: true,
      //   },
      //   xAxis: [
      //     {
      //       type: "category",
      //       axisLabel: {
      //         //x轴文字的配置
      //         show: true,
      //         rotate: 0,
      //         interval: 0, //使x轴文字显示全
      //       },
      //       data: this.materialsList.map((item) => item.name),
      //     },
      //   ],
      //   yAxis: [
      //     {
      //       type: "value",
      //     },
      //   ],
      //   color: ["#5ab1ef", "#2ec7c9"],
      //   series: [
      //     {
      //       name: "",
      //       type: "bar",
      //       // stack: 'Ad',
      //       barWidth: "45%",
      //       emphasis: {
      //         focus: "series",
      //       },
      //       label: {
      //         show: true,
      //         position: "inside",
      //         fontSize: 15,
      //       },
      //       data: this.materialsList,
      //     },
      //   ],
      // };
      const option = {
        title: {
          text: "城区园与农村园大型器械投放情况",
          //  subtext: '纯属虚构',
          left: "left",
        },
        tooltip: {
          trigger: "item",
          //      formatter: function (params) {
          //       // console.log(params);
          //      return params.name+':'+params.value+'%';
          //    },
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: "20%",
          top: 20,
          bottom: 20,
        },
        grid: {
          top: 5,
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "60%",
            center: ["40%", "50%"],
            data: [
              {
                name: '城区园',
                value: 100
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表
      this.materialsChart.setOption(option, true);
      window.addEventListener("resize", this.monitorResize);
    },
    anglechartFn() {
      const option = {
        // backgroud:'#333',
        title: {
          text: "区角材料投放情况",
          //  subtext: '纯属虚构',
          left: "left",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          selectedMode: "single",
          top: 0,
          left: "right",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              //x轴文字的配置
              show: true,
              rotate: 0,
              interval: 0, //使x轴文字显示全
            },
            data: this.angleList.map((item) => item.name),
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        color: ["#5ab1ef", "#2ec7c9"],
        series: [
          //   {
          //       name: '大型器械',
          //       type: 'bar',
          //       // stack: 'Ad',
          //       barWidth:'45%',
          //       emphasis: {
          //           focus: 'series'
          //       },
          //       label: {
          //         show: true,
          //         position: 'inside',
          //         fontSize: 15
          //       },
          //       data: this.angleList.map(item=>item.big),
          //   },
          //   {
          //       name: '中小型器械',
          //       type: 'bar',
          //       // stack: 'Ad',
          //       barWidth:'45%',
          //       emphasis: {
          //           focus: 'series'
          //       },
          //       label: {
          //         show: true,
          //         position: 'inside',
          //         fontSize: 15
          //       },
          //       data: this.angleList.map(item=>item.zx),
          //   },
          {
            name: "",
            type: "bar",
            // stack: 'Ad',
            barWidth: "45%",
            emphasis: {
              focus: "series",
            },
            label: {
              show: true,
              position: "inside",
              fontSize: 15,
            },
            data: this.angleList,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表
      this.anglechart.setOption(option, true);
      window.addEventListener("resize", this.monitorResize);
    },
    //按地区类型统计
    typeChartFn() {
      const option = {
        title: {
          text: "公办、民办园生均中小型器械情况",
          //  subtext: '纯属虚构',
          left: "left",
        },
        tooltip: {
          trigger: "item",
          //      formatter: function (params) {
          //       // console.log(params);
          //      return params.name+':'+params.value+'%';
          //    },
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: "20%",
          top: 20,
          bottom: 20,
        },
        grid: {
          top: 5,
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "60%",
            center: ["40%", "50%"],
            data: this.typeList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.typeChart.setOption(option);
      window.addEventListener("resize", this.monitorResize);
    },
    //按地区类型统计
    natureChartFn() {
      console.log(this.natureList)
      const option = {
        title: {
          text: "城区、乡镇、农村园生均中小型器械情况",
          //  subtext: '纯属虚构',
          left: "left",
        },
        tooltip: {
          trigger: "item",
          //      formatter: function (params) {
          //       // console.log(params);
          //      return params.name+':'+params.value+'%';
          //    },
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: "20%",
          top: 20,
          bottom: 20,
        },
        grid: {
          top: 5,
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "60%",
            center: ["40%", "50%"],
            data: this.natureList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.natureChart.setOption(option);
      window.addEventListener("resize", this.monitorResize);
    },
    //地图监听窗口缩放事件
    monitorResize() {
      this.materialsChart.resize();
      this.anglechart.resize();
      this.natureChart.resize();
      this.typeChart.resize();
    },
  },
};
</script>

<style lang="scss" scoped>
.charts {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  height: 700px;
  .materialsChart {
    margin-top: 10px;
    width: 40%;
    height: 50%;
  }
  .anglechart {
    margin-top: 10px;
    width: 50%;
    height: 50%;
  }
  .natureChart {
    margin-top: 50px;
    width: 45%;
    height: 50%;
  }
  .typeChart {
    margin-top: 50px;
    width: 45%;
    height: 50%;
  }
}
</style>
